<template>
  <div class="container">
    <div class="test-topic">
      <el-image :src="test.cover" />
      <div class="title">{{ test.name }}</div>
    </div>
    <div class="title_number">共{{ test.itemIds.split(',').length }}道心理测试题</div>
    <div class="btns">
      <router-link :to="{name: 'PaperDetail', params:{ id: test.id, name: test.name }}">
        <el-button type="primary" size="mini">查看</el-button>
      </router-link>
      <el-button type="danger" size="mini" @click="delTestPaper(test.id)">删除</el-button>
    </div>
  </div>
</template>

<script>
import Swal from 'sweetalert2'
import { delTestPaper } from '@/api/test'
export default {
  props: {
    test: Object()
  },
  data() {
    return {

    }
  },
  methods: {
    delTestPaper(id) {
      Swal.fire({
        title: '确定要删除该测试问卷吗？',
        icon: 'question',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showCancelButton: true,
        heightAuto: false
      }).then(res => {
        if (res.isConfirmed) {
          delTestPaper({ testId: id }).then(res => {
            if (res.code === 1) {
              Swal.fire({
                title: '删除成功',
                icon: 'success',
                confirmButtonText: 'OK',
                heightAuto: false
              })
              this.$emit('findTestList')
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container{
  padding: 0;
  width: 300px;
  text-align: center;
  background: #D3EAEA;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  .title{
    padding-top: 10px;
  }
}
.title_number{
  font-size: 14px;
  padding-top: 5px;
  color: #1a7777;
}
.btns {
  padding-top: 20px;
  display: inline-block;
  .el-button{
    margin-left: 10px;
  }
}
.test-topic{
  height: 205px;
  .el-image{
    height: 173px;
  }
}
</style>
